<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Game</title>
    <style>
        *{margin:0;padding:0;}
        canvas{
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="id-game" width="500" height="300"></canvas>

<script>
    var log = console.log.bind(console);

    /**
     * create canvas
     * @returns {*}
     */
    var model = function() {
        var canvas = document.getElementById('id-game');
        var ctx = canvas.getContext('2d');

        var g = {
            canvas: canvas,
            ctx: ctx,
        };

        //draw
        g.drawImage = function(ModelImage) {
            g.ctx.drawImage(ModelImage.image,ModelImage.x,ModelImage.y)
        };

        //一秒三十帧的意思 动作会很流畅的样子QAQ
        setInterval(function() {
            g.update();
            g.run();
            ctx.clearRect(0,0,canvas.width,canvas.height);
            g.draw();
        },1000/30);

        return g;
    };

    /**
     * draw image
     * @param path 路径
     * @returns {*}
     */
    var imagePath = function(path) {
        var img = new Image();
        img.src = path;
        return img;
    };
    /**
     *
     * @returns {{image: *, x: number, y: number, speed: number}}
     * @constructor
     */
    var Plank = function() {
        var image = imagePath('../img/plank.png');
        var o = {
            image: image,
            x: 150,
            y: 200,
            speed: 15,
        };

        o.moveLeft = function() {
            o.x -= o.speed;
        };
        o.moveRight = function() {
            o.x += o.speed;
        };

        o.call = function(ball){
            if(ball.y + ball.image.height > o.y){
                if(ball.x > o.x && ball.x < o.x + o.image.width){
                    return true;
                }
            }
            return false;
        };
        return o;
    };

    var Ball = function() {
        var image = imagePath('../img/ball.png');
        var o = {
            image: image,
            x: 32,
            y: 32,
            speedX: 10,
            speedY: 10,
            fired: false,
        };

        o.fire = function() {
            o.fired = true;
        };
        //ball move
        o.move = function() {
            if(o.fired){
                if((o.x - 32) < 0 || (o.x + 32) >= 500) {
                    o.speedX = -o.speedX;
                }
                if((o.y - 32) < 0 || (o.y + 32) >= 300) {
                    o.speedY = -o.speedY;
                }
                // ball move
                o.x -= o.speedX;
                o.y -= o.speedY;
            }
        };

        return o;
    };

    var Block = function() {
        var image = imagePath('../img/block.png');
        var o = {
            image: image,
            x: 100,
            y: 100,
            w: 50,
            h: 10,
            alive: true,
        };

        //remove block
        o.kill = function(ball) {
            if(ball.y + ball.image.height > o.y){
                if(ball.x > o.x && ball.x < o.x + o.image.width){
                    o.alive = false;
                }
            }
        };

        return o;
    };

    var events = function() {

    };

    var __game = function () {
        var G_model = model();
        var ball = Ball();
        var plank = Plank();
        var block = Block();
        //
        var leftDown = false;
        var rightDown = false;

        //events
        window.addEventListener('keydown', function(event) {
            if(event.key == 'a' || event.key == 'A') {
                leftDown = true;
            }else if(event.key == 'd' || event.key == 'D') {
                rightDown = true;
            }else if(event.key == 'f' || event.key == 'F') {
                ball.fire();
            }
        });
        window.addEventListener('keyup', function(event) {
            if(event.key == 'a') {
                leftDown = false;
            }else if(event.key == 'd') {
                rightDown = false;
            }
        });

        //执行动作
        G_model.update = function() {
            if(leftDown) {
                plank.moveLeft();
            }else if(rightDown) {
                plank.moveRight();
            }
        };

        //绘制图形
        G_model.draw = function() {
            G_model.drawImage(plank);
            G_model.drawImage(ball);
            if(block.alive) {
                G_model.drawImage(block);
            }
        };
        //ball run
        G_model.run = function() {
            //球碰到挡板判断
            if(plank.call(ball)){
                ball.speedY *= -1
            }
            block.kill(ball)

            ball.move();

        }

    };
    //启动
    __game();

</script>
</body>
</html>